<template>
    <div class="responsive-layout">
          <div class="kp">
              <div class="responsive-layout">
                  <el-card class="box-card" v-loading="loading">
                      <div class="item">
                          <el-form :inline="true" :model="formInline" class="demo-form-inline">
  
                              <el-form-item label="退货订单">
                                  <el-input style="width: 130px;" v-model="formInline.user" placeholder="审批人"></el-input>
                              </el-form-item>
  
                              <el-form-item label="单据状态">
                                  <el-select style="width: 130px;" v-model="formInline.region" placeholder="状态">
                                      <el-option label="草稿" value="1"></el-option>
                                      <el-option label="待审核" value="2"></el-option>
                                      <el-option label="驳回" value="3"></el-option>
                                      <el-option label="未入库" value="4"></el-option>
                                      <el-option label="部分入库" value="5"></el-option>
                                      <el-option label="已完成" value="6"></el-option>
                                      <el-option label="已关闭" value="7"></el-option>
                                  </el-select>
                              </el-form-item>
                              <el-form-item label="供应商">
                                  <el-select v-model="formInline.GYS" clearable placeholder="请选择" :style="{ width: '200px' }">
                                      <el-option v-for="item in GYSdate" :key="item.supply_code" :label="item.supply_name"
                                          :value="item.supply_name">
                                      </el-option>
                                  </el-select>
                              </el-form-item>
                              <el-form-item label="退货日期">
                                  <el-date-picker style="width: 280px;" v-model="value1" type="daterange" />
                              </el-form-item>
                              <el-form-item>
                                  <el-button @click="Qing()">重置</el-button>
                                  <el-button type="success" @click="Tiaojian()">查询</el-button>
                                  <el-button>高级搜索</el-button>
                              </el-form-item>
                          </el-form>
                          <!-- 操作按钮 -->
                          <el-row>
                              <div class="grid-content bg-purple">
                                  <div style="margin-bottom: 10px;">
                                      <el-button type="success" @click="XinZeng()">新增</el-button>
                                      <el-button @click="Delete()">删除</el-button>
                                      <el-button>复制</el-button>
                                      <el-button @click="ShenHeTankuang()">审核</el-button>
                                      <el-button @click="CheXioa()">撤销</el-button>
                                      <el-button>关闭</el-button>
                                      <el-button>开启</el-button>
                                      <el-button @click="XiaZai2()">导出</el-button>
                                      <el-button @click="ShuaXin()">刷新</el-button>
                                  </div>
                              </div>
                          </el-row>
                          <div><!-- 表单数据-->
                              <el-table :data="Adate" ref="AdateMZ" border style="width: 100%">
                                  <el-table-column fixed type="selection" width="55">
                                  </el-table-column>
                                  <el-table-column fixed width="50" prop="id">
                                      <!-- 自定义表头 -->
                                      <template slot="header">
                                          <div class="container">
                                              <i @click="cz()" class="el-icon-setting" />
                                          </div>
                                      </template>
                                  </el-table-column>
                                  <el-table-column v-if="xs.buy_code" fixed prop="buy_code" label="退货单号" width="180">
                                      <template slot-scope="scope">
                                          <router-link
                                              :to="{ path: '/JHXiangQing', query: { buy_code: scope.row.buy_code } }">
                                              <a class="link">{{ scope.row.buy_code }}</a>
                                          </router-link>
                                      </template>
                                  </el-table-column>
                                  <el-table-column v-if="xs.sure_state" fixed prop="sure_state" label="单据状态" width="80">
                                      <template slot-scope="scope">
                                          <div v-if="scope.row.sure_state === '1'">草稿</div>
                                          <div v-else-if="scope.row.sure_state === '2'">待审核</div>
                                          <div v-else-if="scope.row.sure_state === '3'">驳回</div>
                                          <div v-else-if="scope.row.sure_state === '4'">未入库</div>
                                          <div v-else-if="scope.row.sure_state === '5'">部分入库</div>
                                          <div v-else-if="scope.row.sure_state === '6'">已完成 </div>
                                          <div v-else-if="scope.row.sure_state === '7'">已关闭</div>
                                      </template>
                                  </el-table-column>
                                  <el-table-column v-if="xs.buy_date" fixed prop="buy_date" label="退货日期" width="120">
                                  </el-table-column>
                                  <el-table-column v-if="xs.supply_name" prop="supply_name" label="供应商" width="80">
                                  </el-table-column>
                                  <el-table-column v-if="xs.link_man" prop="link_man" label="联系人" width="120">
                                  </el-table-column>
                                  <el-table-column v-if="xs.link_way" prop="link_way" label="联系方式" width="120">
                                  </el-table-column>
                                  <el-table-column v-if="xs.buy_man" prop="buy_man" label="进货人" width="120">
                                  </el-table-column>
                                  <el-table-column v-if="xs.sl" prop="sl" label="货品数量" width="120">
                                  </el-table-column>
                                  <el-table-column v-if="xs.zjg" prop="zjg" label="货品金额" width="120">
                                  </el-table-column>
                                  <el-table-column v-if="xs.item_names" prop="item_names" label="销售货品" width="120">
                                      <template slot-scope="scope">
                                      {{ formatItemNames(scope.row.item_names)}}
                                      </template>
                                  </el-table-column>
                                  <el-table-column v-if="xs.create_by" prop="create_by" label="制单人" width="120">
                                  </el-table-column>
                                  <el-table-column v-if="xs.create_time" prop="create_time" label="制单时间" width="120">
                                  </el-table-column>
                                  <el-table-column v-if="xs.sure_man" prop="sure_man" label="审核人" width="120">
                                  </el-table-column>
                                  <el-table-column v-if="xs.sure_date" prop="sure_date" label="审核时间" width="120">
                                  </el-table-column>
                                  <el-table-column fixed="right" label="操作" width="100">
                                      <template slot-scope="scope">
                                          <el-button v-if="scope.row.sure_state === '1'" @click="bianJi(scope.row)" type="text"
                                              size="small">编辑</el-button>
                                          <el-button v-if="scope.row.sure_state === '2'" @click="bianJi(scope.row)" type="text"
                                              size="small">编辑</el-button>
                                          <el-button v-if="scope.row.sure_state === '1'" @click="shanChu(scope.row)" type="text"
                                              size="small">删除</el-button>
                                          <el-button v-if="scope.row.sure_state === '2'" @click="shanChu(scope.row)" type="text"
                                              size="small">删除</el-button>
                                          <el-button v-if="scope.row.sure_state === '3'" @click="cheXiao(scope.row)" type="text"
                                              size="small">撤销</el-button>
                                          <el-button v-if="scope.row.sure_state === '4'" @click="cheXiao(scope.row)" type="text"
                                              size="small">撤销</el-button>
                                      </template>
                                  </el-table-column>
                              </el-table>
                              <!-- 分页 -->
                              <div class="block">
                                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                      :current-page="this.dqy" :page-sizes="[4, 8, 12, 16, 20]" :page-size="this.mys"
                                      layout="total, sizes, prev, pager, next, jumper" :total="this.zts">
                                  </el-pagination>
                              </div>
                          </div>
                      </div>
                  </el-card>
              </div>
          </div>
          <!--审核弹框-->
          <el-dialog :inline="true" title="审核" :visible.sync="kuang" width="30%">
              <el-form ref="form" label-width="80px">
                  <el-form-item label="审核状态">
                      <el-radio-group v-model="ShenHezt">
                          <el-radio label="4">通过</el-radio>
                          <el-radio label="3">驳回</el-radio>
                      </el-radio-group>
                  </el-form-item>
                  <el-form-item label="审核意见">
                      <el-input style="width: 280px;" type="textarea" v-model="ShenHeyj"></el-input>
                  </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                  <el-button @click="kuang = false">取 消</el-button>
                  <el-button type="primary" @click="shenHe()">确 定</el-button>
              </span>
          </el-dialog>
    </div>
  </template>
  <script>
  import moment from 'moment';
  import $http from '@/http/base.js';
  export default {
      data(){
          return {
              Adate:[],
              formInline:{
                  region:'\0',
                  GYS:'',
                  user:'',
              },
              //时间控件转换格式
              value1: [],
              qsj: '',
              hsj: '',
              mys: 4,
              dqy: 1,
              zts: 0,
              GYSdate:[],
              xs: {
                  sure_date: true,
                  sure_man: true,
                  create_time: true,
                  create_by: true,
                  item_names: true,
                  zjg: true,
                  sl: true,
                  buy_man: true,
                  link_way: true,
                  link_man: true,
                  supply_name: true,
                  buy_date: true,
                  sure_state: true,
                  buy_code: true
              },
              Idbh:[],//存储批量编号
              Ztzd:[],//储存批量状态
              kuang:false,//默认关闭弹框
              ShenHezt:'',
              ShenHeyj:'',
              ShenHeman:'',
              ShenHesj:'',
              loading:true//刷新加载
          }
      },
      methods:{
          //分页查询
          FenYecha() {
  
              //console.log("前时间"+this.formattedValue1[0]+"和"+this.formattedValue1[1]);
              //    console.log("目标表"+this.formInline.en_form+"编号前缀"+this.formInline.en_prefix);
              //console.log(this.qsj + "hou" + this.hsj);
              $http
              .get('api/whom_suppy_h/WHOMWhereSelect?mys=' + this.mys + '&dqy=' + this.dqy + '&qsj=' + this.qsj + '&hsj=' + this.hsj )
              .then(res => {
                  this.Adate = res.list;
                  this.zts = res.zts;
                  console.log(res);
              })
              .catch(err => {
                  alert('查询失败'),
                      console.log(err);
              })
          },
          //批量删除
          Delete(){
              this.Huoqvxinxi();
              const hasThreeOrFour = this.Ztzd.every(item => item === '1' || item === '2');
              if (!hasThreeOrFour) {
                  this.$message({
                      message:'删除失败,状态不符',
                      type: 'warning'
                  });
              } else {
                  this.$confirm('确定删除这些数据吗?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                  }).then(() => {
                      $http
                          .put('api/WHOM_Select/WHOMDelete', this.Idbh)
                          .then(res => {
                              this.$message({
                                  message:'删除成功!',
                                  type: 'success'
                              });
                              this.FenYecha();
                              this.drawer = false;
                          })
                          .catch(err => {
                              this.$message.error('删除失败');
                              console.log(err);
                          })
                  }).catch(() => {
                      this.$message({
                          type: 'info',
                          message: '已取消删除'
                      });
                  });
              }
          },
          //审核弹窗
          ShenHeTankuang(){
              this.dangqianTime();
              this.Huoqvxinxi();
              if(this.Idbh == "" && this.Ztzd == ""){
                  this.$message({
                      message:'我靠!你都没选就想审核',
                      type: 'warning'
                  });
              }else{
                  const zhuangtpanduan = this.Ztzd.every(item => item === '2');
                  if(!zhuangtpanduan){
                      this.$message({
                          message:'审核失败,状态不符',
                          type: 'warning'
                      });
                  }else{
                      this.ShenHe();
                  }
              }
          },
          //批量审核
          ShenHe(){
              this.kuang = true
              $http
                  .put('api/WHOM_Select/SHUpdate?states='+this.ShenHezt+'&sureman='+this.ShenHeman+'&suredate='+this.ShenHesj+'&remack'+this.ShenHeyj+'',this.Idbh)
                  .then(res =>{
                      this.$message({
                          message:'审核成功!',
                          type: 'success'
                      })
                      this.FenYecha();
                      this.drawer = false
                      this.kuang = false
                  })
                  .catch(err =>{
                      this.$message.error({
                          message:"审核失败"
                      })
                      console.log(err);
                  })
          },
          //批量撤销
          CheXioa(){
              this.Huoqvxinxi()
              const zhuangtaipanduan = this.Ztzd.every(item => item === '3' || item === '4');
              if(!zhuangtaipanduan){
                  this.$message({
                      message:'撤销失败,状态不符',
                      type: 'warning'
                  });
              }else{
                  this.$confirm('确定撤销这些数据吗?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                  }).then(() => {
                      $http
                          .put('api/WHOM_Select/CXUpdate', this.Idbh)
                          .then(res => {
                              this.$message({
                                  message:'撤销成功!',
                                  type: 'success'
                              });
                              this.FenYecha();
                              this.drawer = false;
                          })
                          .catch(err => {
                              this.$message.error('撤销失败');
                              console.log(err);
                          })
                  }).catch(() => {
                      this.$message({
                          type: 'info',
                          message: '已取消对数据的撤销'
                      });
                  });
              }
          },
          //刷新
          ShuaXin(){
              this.loading = true
              this.QingKong();
              this.FenYecha();
              setTimeout(() => {
                  this.loading = false;
          }, 2000);
          },
          //清空
          QingKong() {
              this.formInline.region = '\0',
                  this.formInline.GYS = '',
                  this.formInline.user = '',
                  this.qsj = '',
                  this.hsj = ''
          },
          Tiaojian(){
              this.FenYecha();
          },
          //获取多选中的编号,状态
          Huoqvxinxi() {
              this.Idbh = [];//存储序号(id)
              this.Ztzd = [];//存储状态
              const selectedRows = this.$refs.AdateMZ.selection; // 获取选中的行数据
              const data = selectedRows.map(row => { return { '序号': row.id }; });//获取序号
              const data2 = selectedRows.map(row => { return { '状态': row.sure_state }; });//获取状态
  
              for (let i = 0; i < data.length; i++) {
                  this.Idbh.push(data[i]['序号']);
              }
              for (let i = 0; i < data2.length; i++) {
                  this.Ztzd.push(data2[i]['状态']);
              }
              console.log('序号：' + this.Idbh);
              console.log('状态：' + this.Ztzd);
          },
          //条数改变
          handleSizeChange(val) {
              this.mys = val;
              this.cha();
          },
          //页数改变
          handleCurrentChange(val) {
              this.dqy = val;
              this.cha();
          },
          //字段处理
          formatItemNames(itemNames) {
              if (itemNames && itemNames.length > 5) {
              return itemNames.slice(0, 5) + "...";
              } else if (itemNames) {
              return itemNames;
              } else {
              return "";
              }
          },
          //当前时间获取 年月日
          dangqianTime() {
              const date = new Date();
              const year = date.getFullYear();
              const month = ('0' + (date.getMonth() + 1)).slice(-2);
              const day = ('0' + date.getDate()).slice(-2);
  
              this.currenTime = `${year}-${month}-${day}`;
              this.ShenHesj = this.currenTime
          },
          XinZeng()
          {
            this.$router.push('/InventoryManagementadd');
          }
      },
      mounted(){
          this.FenYecha()
          this.formatItemNames()
          this.ShuaXin()
      },
      
  }
  </script>
  
  <style scoped>
  </style>